<template>
  <div class="container">
    <a-space direction="vertical" :fill="true" :size="16" class="space">
      <a-row
        class="grid-demo"
        :gutter="24"
        justify="space-between"
        align="center"
      >
        <a-col :span="12">
          <div class="title"> 患者行程轨迹：{{ route.params.name }} </div>
        </a-col>
        <a-col :span="12">
          <div style="float: right">
            <a-button type="text" @click="back">返回</a-button>
          </div>
        </a-col>
      </a-row>
      <a-row
        class="grid-demo"
        :gutter="24"
        justify="space-between"
        align="center"
      >
        <a-col :span="24">
          <table-search
            :fileds="searchFileds"
            :label-col-props="0"
            :wrapper-col-props="24"
            @search="search"
            @reset="search"
          ></table-search>
        </a-col>
      </a-row>
      <a-row
        class="grid-demo"
        :gutter="24"
        justify="space-between"
        align="center"
      >
        <a-col :span="24">
          <div class="map">
            <el-amap :center="center" :zoom="zoom" @init="mapInit">
              <el-amap-polyline v-bind="polyline" />
              <el-amap-marker
                v-for="(item, index) in marks"
                :key="index"
                v-bind="item"
              >
              </el-amap-marker>
            </el-amap>
          </div>
        </a-col>
      </a-row>
    </a-space>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';

  import { useRoute, useRouter } from 'vue-router';
  import { Message } from '@arco-design/web-vue';
  import { positionlist } from '@/api/dashboard';
  // eslint-disable-next-line import/no-unresolved

  const route = useRoute();
  const router = useRouter();
  const searchFileds = reactive([
    {
      span: 5,
      field: 'datatime',
      tag: 'a-range-picker',
      initValue: '',
      attrs: {
        showTime: true,
      },
    },
  ]);
  const polyline: any = ref({
    visible: true,
    path: [],
    lineJoin: 'round',
    lineCap: 'round',
    showDir: true,
    strokeWeight: 7,
    strokeColor: 'rgba(254, 255, 120, 1)',
  });
  const marks: any = ref([]);
  const center = ref([116.39392, 39.91737]);
  const zoom = ref(20);

  const back = () => {
    router.back();
  };
  const getData = async (startTime?: string, endTime?: string) => {
    const { code, data, msg } = await positionlist({
      endTime: endTime || '',
      startTime: startTime || '',
      userId: route.params.id,
    });
    if (code !== 200) {
      Message.error(msg);
      return;
    }
    if (data.length <= 0) {
      center.value = [116.39392, 39.91737];
      polyline.value.path = [];
      marks.value = [];
      Message.error('未查询到行程轨迹');
      return;
    }
    center.value = [data[0].lon, data[0].lat];
    polyline.value.path = data.map((item: any) => {
      return [item.lon, item.lat];
    });
    marks.value = data
      .filter((item: any, index: number) => {
        return index === 0 || index === data.length - 1;
      })
      .map((item: { lon: any; lat: any }, index: any) => ({
        visible: true,
        position: [item.lon, item.lat],
        content: `<div class="custom-content-marker">
          ${
            index === 1
              ? '<img src="./../../../src/assets/images/start-mark.png">'
              : '<img src="./../../../src/assets/images/end-mark.png">'
          }
        </div>`,
      }));
  };
  const search = (e: any) => {
    getData(e.datatime[0], e.datatime[1]);
  };
  const mapInit = (e: any) => {};
  getData();
</script>

<style lang="less" scoped>
  .container {
    padding-bottom: 0;
    display: flex;
    background-color: var(--color-bg-2);
    padding: 24px;
    .space {
      width: 100%;
    }
    .title {
      font-size: 14px;
      font-weight: 500;
      color: var(--color-text-2);
      line-height: 16px;
    }
    .map {
      height: 600px;
      width: 100%;
    }
  }
  :deep(.custom-content-marker) {
    position: absolute;
    width: 24px;
    height: 24px;
    top: -30px;
    left: -15px;
    img {
      width: 100%;
      height: 100%;
    }
  }
</style>
